<template>
  <div class="first_level_page">
    <div id='head_top'>
      <!-- <slot name='search'></slot> -->
      <section class="head_left left">
        <div class="head_location left">
          <img src="../../../images/location.png">
        </div>
        仓库3710075
      </section>
      <section class="head_right right">
        <div class="head_search">
          <img src="../../../images/searchIcon.png">
        </div>
      </section>
    </div>
    <div class="marginTop">
      <van-search v-model="value" shape="round" background="#36b4be" placeholder="请输入搜索关键词" />
    </div>
    <div class="customer_main">
      <transition name="van-slide-left">
        <div class="customer_demo" v-if="visible[0]">
          <div class="customer_left left">
            <img src="../../../images/goodsDefault.png">
          </div>
          <div class="customer_right right">
            <div class="left_info">
              <div class="customer_name ellipsis">
                **便利店玉凤路分店
              </div>
              <div class="customer_time">
                <img src="../../../images/time.png">
                08:00-22:00
                <div class="right customer_distance">682m</div>
              </div>
              <div class="customer_promotion ellipsis">
                双十一福利大放送，当天有菜单爱仕达
              </div>
            </div>
            <div class="right_btn" @click="addBtnFn(0)"><span>添加</span></div>

          </div>
          <div class="clear"></div>
        </div>
      </transition>
      <transition name="van-slide-left">
        <div class="customer_demo" v-if="visible[1]">
          <div class="customer_left left">
            <img src="../../../images/goodsDefault.png">
          </div>
          <div class="customer_right right">
            <div class="left_info">
              <div class="customer_name ellipsis">
                **便利店玉凤路分店
              </div>
              <div class="customer_time">
                <img src="../../../images/time.png">
                08:00-22:00
                <div class="right customer_distance">682m</div>
              </div>
              <div class="customer_promotion ellipsis">
                双十一福利大放送，当天有菜单爱仕达
              </div>
            </div>
            <div class="right_btn" @click="addBtnFn(1)"><span>添加</span></div>

          </div>
          <div class="clear"></div>
        </div>
      </transition>

    </div>
    <div class="heightBottom"></div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Dialog, Notify } from 'vant';
export default {
  data() {
    return {
      value: '',
      visible: [true, true]
    }
  },
  created() {
  },
  mounted() {

  },
  computed: {
    ...mapState([
      'userInfo',
    ]),
  },
  methods: {
    addBtnFn(id) {
      Dialog.confirm({
        title: '提示',
        message: '确认添加吗',
      }).then(() => {
        this.visible = this.visible.map((v, i) => id == i ? !v : v);
        Notify({ type: 'success', message: '已添加' });
      })
      .catch(() => {
        Notify({ type: 'warning', message: '已取消' });
      });
    }
  },
}
</script>

<style lang="scss" scoped>
@import 'src/style/mixin';

.first_level_page {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
}

#head_top {
  clear: both;
  background-color: $blue;
  position: fixed;
  z-index: 101;
  left: 0;
  top: 0;
  @include wh(100%, .88rem);
}

.head_left {
  @include sc(.34rem, #fff);
  line-height: .88rem;

  .head_location {
    font-size: 0;
    display: inline-block;
    @include wh(.74rem, .88rem);

    img {
      @include wh(100%, 100%);
    }
  }
}

.head_right {
  font-size: 0;

  .head_search {
    display: inline-block;
    @include wh(.74rem, .88rem);

    img {
      margin: .26rem .19rem;
      @include wh(.36rem, .36rem);
    }
  }

  .head_add {
    display: inline-block;
    @include wh(.74rem, .88rem);

    svg {
      margin: .26rem .19rem .26rem .13rem;
      @include wh(.36rem, .36rem);
    }
  }
}

.customer_main {
  padding-top: .14rem;

  .customer_demo {
    display: block;
    margin-top: .14rem;
    @include wh(100%, 1.98rem);
    background: #fff;
    border-bottom: .01rem solid #36b4be;
    border-top: .01rem solid #36b4be;

    .customer_left {
      @include wh(1.9rem, 1.98rem);

      img {
        margin: .24rem .2rem;
        @include wh(1.5rem, 1.5rem);
      }
    }

    .customer_right {
      @include wh(5.6rem, 1.98rem);
      // padding-right: .2rem;
      display: flex;
      justify-content: space-between;

      .left_info {
        .customer_name {
          @include sc(.3rem, #333);
          height: .3rem;
          line-height: .3rem;
          margin: .32rem 0 .16rem;
        }

        .customer_time {
          @include sc(.28rem, #999);
          height: .32rem;
          line-height: .32rem;

          img {
            float: left;
            margin-right: .1rem;
            @include wh(.32rem, .32rem);
            vertical-align: middle;
          }

          .customer_distance {
            @include sc(.28rem, #999);
          }
        }

        .customer_promotion {
          @include sc(.24rem, #999);
          height: .24rem;
          line-height: .24rem;
          margin-top: .36rem;
        }
      }

      .right_btn {
        text-align: center;
        background-color: #36b4be;
        height: 1.97em;
        box-sizing: border-box;
        padding: 0 5%;

        span {
          font: .26rem/1.98rem '';
          color: #fff;
        }
      }

      .btn_fade {
        transition: 0.2s;
        transform: scale(0);
      }
    }
  }
}
</style>
